<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-19 10:36:32
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.deliver-goods
  .title.flex.justify-center.bold.mb4 发货
  .form-content.flex
    .require.w100
      el-form(
        ref="formRef",
        :model="form",
        :rules="rules",
        label-position="left",
        label-width="100px",
        status-icon
      )
        el-form-item(label="快递公司：", prop="express_company")
          el-select.w100(
            v-model="form.express_company",
            placeholder="请选择",
            clearable,
            @change="expressCompanyChange"
          )
            el-option(
              v-for="item in expressCompanyList",
              :key="item.name",
              :label="item.name",
              :value="item.name"
            )
        el-form-item(label="快递单号：", prop="express_no")
          el-input(v-model="form.express_no", placeholder="请输入", clearable)
  .flex.justify-center.mt4.mb4
    el-button.btn(
      type="primary",
      size="large",
      plain,
      round,
      @click="onCancel(formRef)"
    ) 取消
    el-button.btn(
      type="primary",
      size="large",
      round,
      @click="onConfirm(formRef)"
    ) 确认
</template>

<script setup>
import { onMounted, ref } from "vue";
import {OrderExpressCompany} from '@/api/easymain'
const props = defineProps({
  rowId: "",
});
onMounted(() => {
  console.log("roewefw", props.rowId);
  form.value.id = props.rowId;
  getOrderExpressCompany();
});

//获取快递公司
const getOrderExpressCompany=()=>{
  OrderExpressCompany().then((res)=>{
    if(res.code==1){
      expressCompanyList.value=res.data
    }
  })
}

const formRef = ref();
const rules = ref({
  express_company: [
    {
      required: true,
      message: "请选择快递公司",
      trigger: "change",
    },
  ],
  express_no: [
    {
      required: true,
      message: "请输入快递单号",
      trigger: "blur",
    },
  ],
});
const form = ref({
  id: "",
  express_company: "",
  express_no: "",
});

const expressCompanyList = ref([]);
//快递公司切换
const expressCompanyChange = (val) => {
  form.value.express_company = val;
};
const emits = defineEmits(["cancel", "confirm"]);

const handleAvatarSuccess = (response, uploadFile) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
};

// 取消
const onCancel = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  emits("cancel");
};

// 确认
const onConfirm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      emits("confirm", form.value);
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
  // emits("confirm", form.value);
};
</script>

<style lang="stylus" scoped>
.deliver-goods {
  .title {
    font-size: 24px;
  }

  .form-content {
    padding: 0px 66px;

    .require {
      padding: 16px 12px 0px 12px;
      border: 1px solid #E6E6E6;
    }

    .no-require {
      margin-left: 32px;
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
    }
  }

  .input-width {
    width: 245px;
  }

  .btn {
    width: 178px;
  }

  .overdue {
    color: #E84026;
  }

  .refund {
    color: #2487E8;
  }

  .no-quota {
    margin-top: 200px;
  }

  // 上传图片相关
  .avatar-uploader .el-upload {
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: #dcdfe6;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 152px;
    height: 100px;
    text-align: center;
    border: 1px dashed #dcdfe6;
  }

  .avatar-uploader .avatar {
    width: 152px;
    height: 100px;
    display: block;
  }
}
</style>
      